<template>
  <div class="serve">
    <div class="box" v-for="item in listServe" :key="item.id" @click="pay(item)">
      <van-image class="goods-img" width="6.5rem" height="6.5rem" :src="item.goods.thumb" />
      <div class="goods-info">
        <div class="goods-title">{{item.goods.title}}</div>
        <div class="goods-content">
          <div class="left">
            <div class="consult">{{item.consult_type == 0 ? '电话咨询' : "在线咨询"}}</div>
            <div class="price">￥{{item.amount}}</div>
          </div>
          <div class="right">
            <van-button color="#daa032" size="small">立即咨询</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Image } from "vant";
import mixins from "./mixin.js";
export default {
  mixins:[mixins],
  props:{
    listServe:{
      type:Array
    }
  },
  methods:{
    pay(item){
      this.$emit("consult",item);
    },

  },
  components: {
    VanImage: Image
  }
};
</script>

<style lang="scss" scoped>
.right{
  /deep/ .van-button{
    align-self: flex-end;
  }
}
.goods-content{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items:flex-end;
}
.consult {
  color: #929191;
  margin-bottom: .5rem;
}
.box {
  background-color: #fff;
  display: flex;
  margin-top: 1rem;
}
.goods-info {
  flex:1;
  margin-left: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: baseline;
}
.price {
  color: #f14e4e;
}
</style>
